"use client"
import { useState, useEffect, ReactNode } from "react"
import { useMediaQuery } from "@/app/component/_hooks/use-media-query"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { X } from "lucide-react"
import classNames from "classnames"

interface FormModalProps {
  // 可选：外部控制的打开状态
  open?: boolean
  // 可选：外部控制的打开状态变更函数
  onOpenChange?: (open: boolean) => void
  // header 标题
  header?: ReactNode
  // footer 底部
  footer?: ReactNode
  // content 
  content?: ReactNode
  // trigger 触发器
  trigger?: ReactNode
  // 是否显示最大高度
  showMaxSize?: boolean
  // slot 插槽
  slot?: ReactNode
  // 自定义类名
  className?: string
}

export function FormModal({ 
  open: externalOpen, 
  onOpenChange: externalOnOpenChange, 
  header, content, footer, trigger, showMaxSize, slot, className }: FormModalProps) {
  // 内部状态，用于非受控模式
  const [internalOpen, setInternalOpen] = useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  // 确定使用内部状态还是外部状态
  const isControlled = externalOpen !== undefined && externalOnOpenChange !== undefined
  const open = isControlled ? externalOpen : internalOpen
  const setOpen = isControlled ? externalOnOpenChange : setInternalOpen

  // 当外部open变化时同步到内部状态（用于混合模式下的同步）
  useEffect(() => {
    if (externalOpen !== undefined && !isControlled) {
      setInternalOpen(externalOpen)
    }
  }, [externalOpen, isControlled])

  if (isDesktop) {
    return (
      <Popover modal={true} open={open} onOpenChange={setOpen}> 
        <PopoverTrigger asChild>
          {trigger}
        </PopoverTrigger>
        {/* 宽度和trigger一致 */}
        <PopoverContent className={classNames("px-0 py-2 w-[--radix-popover-trigger-width] max-h-[360px] overflow-y-auto flex flex-col gap-[10px]", {
          "h-[360px]": showMaxSize
        }, className)}>
          {/* 不需要展示header，因为popver的位置很直观 */}
          {/* <strong>{header}</strong> */}
          {slot && <div className="px-2">{slot}</div>}

          <div className="p-2 flex-1 overflow-y-auto">
            {content}
          </div>
          {footer && <div className="px-2">{footer}</div>}
        </PopoverContent>
      </Popover>
    )
  }

  return (
    <Drawer repositionInputs={true} open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        {trigger}
      </DrawerTrigger>
      <DrawerContent className={classNames("px-0 pb-2 max-h-[80%] flex flex-col gap-[10px]", {
        "h-[80%]": showMaxSize
      }, className)}>
        <DrawerTitle className="px-2 flex justify-between items-center min-h-[40px]">
          <div>
            {header}
          </div>
          <DrawerClose>
            <X />
          </DrawerClose> 
        </DrawerTitle>

        {slot && <div className="px-2">{slot}</div>}
        
        <div className="px-2 flex-1 overflow-y-auto">
          {content}
        </div>

        {footer && <DrawerFooter className="px-2">
          {footer}
        </DrawerFooter>}
      </DrawerContent>
    </Drawer>
  )
}
    